import {
  ProLayout,
  ProLayoutProps,
  ProTable,
} from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import React from "react";
import { queryConfig, queryPageConfig } from "../../../api";
import { Link, useLocation, useParams } from "react-router-dom";
import { Spin } from "antd";
import Outlet from "../../../lowCode/core/Outlet";

const fullScreenProps: ProLayoutProps = {
  headerRender: false,
  token: {
    header:{
      
    },
    pageContainer: {
      paddingBlockPageContainerContent: 0,
      paddingInlinePageContainerContent: 0,
    },
  },
};
let adminProps: ProLayoutProps = {
  layout: "mix",

  token: {
    header: {
      colorTextMenuSelected: "#fff",
      colorTextMenuActive: "#87bb2a",
      colorBgMenuItemSelected: "#87bb2a",
      colorBgMenuItemHover: "#fff",
    },
    pageContainer: {
      paddingBlockPageContainerContent: 10,
      paddingInlinePageContainerContent: 10,
    },
    sider: {
      colorMenuBackground: "#fff",
      colorTextMenuActive: "red",
      colorTextMenuSelected: "#87bb2a",
      colorBgMenuItemSelected: "#f6ffed",
      colorBgMenuItemHover: "#f6ffed",
      colorTextMenuItemHover: "#87bb2a",
      colorBgMenuItemActive: "#f6ffed",
    },
  },
};
const App = () => {
  const urlParams = useParams();
  const basename = `/lowCode/preview/${urlParams.siteId}`;
  const location = useLocation();
  const { data, loading } = useRequest<any, any>(() =>
    queryConfig({ siteId: urlParams.siteId })
  );
  const menus = data ? data.menus : [];
  const config = data ? data.config : {};
  console.log("menumenu", data, menus);
  const fullScreen = menus.find((v) => basename + v.path === location.pathname&&v.fullScreen);
  if (loading) {
    return <Spin />;
  }
  //   if(fullScreen){
  //     return <PageOutlet request={()=>queryPageConfig({pathname:location.pathname.replace(basename,'')})}/>
  //   }
  console.log("PageOutletPageOutlet");
  let proLayoutProps = {};
  if (fullScreen) {
    
    proLayoutProps = fullScreenProps;
  } else {
    proLayoutProps = adminProps;
  }
  return (
    <ProLayout
      title={config.name}
      {...proLayoutProps}
      // token={{
      //     header:{
      //         heightLayoutHeader:10
      //     }
      // }}
      hide={fullScreen}
      menu={{
        loading,
        // request(params, defaultMenuData) {
        //     return
        // },
      }}
      menuItemRender={(item, defaultDom) => {
        return <Link to={(basename + item.path) as string}>{defaultDom}</Link>;
      }}
      route={{
        children: menus,
      }}
    >
      <Outlet
        key={location.pathname}
        request={() =>
          queryPageConfig({
            siteId: urlParams.siteId,
            pathname: location.pathname.replace(basename, ""),
          })
        }
      />
    </ProLayout>
  );
};
export default App;
